<template>
  <div class="auth">
    <van-nav-bar
      title="实名认证"
      left-text="返回"
      left-arrow
      @click-left="router.back()"
    />

    <div class="auth-form">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="formData.realName"
            name="realName"
            label="真实姓名"
            placeholder="请输入真实姓名"
            :rules="[{ required: true, message: '请填写真实姓名' }]"
          />
          
          <van-field
            v-model="formData.idNumber"
            name="idNumber"
            label="身份证号"
            placeholder="请输入身份证号"
            :rules="[
              { required: true, message: '请填写身份证号' },
              { pattern: idCardPattern, message: '请输入正确的身份证号' }
            ]"
          />

          <!-- 身份证上传 -->
          <van-field
            name="idCardFront"
            label="身份证正面"
          >
            <template #input>
              <van-uploader
                v-model="formData.idCardFront"
                :max-count="1"
                :after-read="afterRead"
              />
            </template>
          </van-field>

          <van-field
            name="idCardBack"
            label="身份证反面"
          >
            <template #input>
              <van-uploader
                v-model="formData.idCardBack"
                :max-count="1"
                :after-read="afterRead"
              />
            </template>
          </van-field>

          <!-- 电子签名上传 -->
          <van-field
            name="signature"
            label="电子签名"
          >
            <template #input>
              <van-uploader
                v-model="formData.signature"
                :max-count="1"
                :after-read="afterRead"
              />
            </template>
          </van-field>
        </van-cell-group>

        <div class="auth-tips">
          <van-cell title="认证说明">
            <template #label>
              <p>1. 请确保上传的证件清晰完整</p>
              <p>2. 请上传手写签名照片作为电子签名</p>
              <p>3. 所有信息仅用于身份验证，我们将严格保密</p>
            </template>
          </van-cell>
        </div>

        <div class="submit-btn">
          <van-button round block type="primary" native-type="submit">
            提交认证
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { submitAuth } from '@/api/user';

const router = useRouter();
const idCardPattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

const formData = ref({
  realName: '',
  idNumber: '',
  idCardFront: [],
  idCardBack: [],
  signature: []
});

// 图片上传后的处理
const afterRead = (file) => {
  // 这里可以添加图片压缩等处理
  console.log('文件上传:', file);
};

const onSubmit = async (values) => {
  if (!formData.value.idCardFront.length) {
    showToast('请上传身份证正面照片');
    return;
  }
  if (!formData.value.idCardBack.length) {
    showToast('请上传身份证反面照片');
    return;
  }
  if (!formData.value.signature.length) {
    showToast('请上传电子签名');
    return;
  }

  try {
    await submitAuth(formData.value);
    showToast({
      type: 'success',
      message: '认证信息提交成功',
      onClose: () => {
        router.back();
      }
    });
  } catch (error) {
    showToast(error.message || '认证失败，请重试');
  }
};
</script>

<style scoped lang="scss">
.auth {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 20px;

  .auth-form {
    margin-top: 12px;
  }

  .submit-btn {
    margin: 16px;
  }

  .auth-tips {
    margin-top: 12px;

    :deep(.van-cell__label) {
      p {
        margin: 4px 0;
        color: #666;
      }
    }
  }
}
</style> 